<template>
  <ul class="songs" v-if='!isRecommendList' >
    <li class="song">
      <span class="count" style="visibility: hidden">01</span>
      <a-icon type="heart" class="ico" style="visibility: hidden" />
      <span class="song-name ofh"> 音乐标题</span>
      <span class="song-singer ofh" :style="{ margin: dis2 }">歌手</span>
      <span class="song-album ofh">专辑</span>
      <span class="song-time" v-if="!isSongList">时长</span>
      <span class="song-hot ofh" v-if="!isSongList">热度</span>
    </li>
    <li
      class="song"
      v-for="(item, i) in result"
      :key="item.id"
      @dblclick="setId(item.id)"
    >
      <span class="count">{{ i < 9 ? "0" : "" }}{{ i + 1 }}</span>
      <a-icon type="heart" class="ico" />
      <span class="song-name ofh"> {{ item.name }}</span>
      <span class="song-singer ofh" :style="{ margin: dis2 }">{{
        (item.artists || item.ar)[0].name || ""
      }}</span>
      <span class="song-album ofh">{{
        (item.album && item.album.name) || item.al.name
      }}</span>
      <span class="song-time">{{
        item.duration && resolveTime(+item.duration)
      }}</span>
      <span class="song-hot ofh" v-if="!isSongList">{{ item.mark }}</span>
    </li>
  </ul>
  <ul v-else class='songs'>
    <li class="song">
      <span class="count" style="visibility: hidden">01</span>
      <a-icon type="heart" class="ico" style="visibility: hidden" />
      <span class="song-name ofh"> 音乐标题</span>
      <span class="song-singer ofh" :style="{ margin: dis2 }">歌手</span>
      <span class="song-album ofh">专辑</span>
    </li>
    <li
      class="song"
      v-for="(item, i) in recommentLists"
      :key="item.id"
      @dblclick="setId(item.id)"
    >
      <span class="count">{{ i < 9 ? "0" : "" }}{{ i + 1 }}</span>
      <a-icon type="heart" class="ico" />
      <span class="song-name ofh"> {{ item.name }}</span>
      <span class="song-singer ofh" :style="{ margin: dis2 }">{{
        resolveName(item.ar)
      }}</span>
      <span class="song-album ofh">{{
        item.al.name
      }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "SongItem",
  props: ["result", "isSongList", "isRecommendList", 'recommentLists'],
  data() {
    return {
      dis: this.isSongList ? `0 10rem` : `0  5rem`,
      dis2: this.isSongList ? `0 4rem` : `0`,
    };
  },
  methods: {
    setId(id) {
      this.$bus.$emit("changeId", id);
    },
    resolveName(arr) {
      if (Array.isArray(arr)) {
        return arr.map(item => item.name).join(',');
      }
    },
    resolveTime(time) {
      time = Math.floor(time / 1000);
      let minutes = Math.floor(time / 60);
      let seconds = time - minutes * 60;
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return `${minutes} : ${seconds}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.songs {
  .song {
    display: flex;
    align-items: center;
    padding-left: 2rem;
    height: 4rem;
    cursor: pointer;
    &:hover {
      background: rgba(0, 0, 0, 0.2) !important;
    }
    .ico {
      margin: 0 1.5rem;
      margin-right: 5rem;
    }
    .song-name {
      width: 18rem;
    }
    .song-singer {
      width: 11rem;
    }
    .song-album {
      width: 11rem;
      margin-right: 1.5rem;
    }
    .song-time {
      width: 11rem;
    }
    .song-hot {
      width: 6rem;
      margin-left: 2rem;
    }
  }
  .song:nth-child(2n) {
    background: rgba(255, 255, 255, 0.1);
  }
}
</style>